<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水果展示</title>
	</head>
	<body>
		<div class="main">
			<h1 align="center">水果展示</h1>
			<hr>
			<div class="box1">
				<img src="./img/fruit.png" alt="加载失败">
				<h2 align="center">草莓</h2>
			</div>
			<div class="box1">
				<img src="./img/fruit.png" alt="加载失败">
				<h2 align="center">苹果</h2>
			</div>
			<div class="box1">
				<img src="./img/fruit.png" alt="加载失败">
				<h2 align="center">橘子</h2>
			</div>
			<div class="box1">
				<img src="./img/fruit.png" alt="加载失败">
				<h2 align="center">杨梅</h2>
			</div>
		</div>
	</body>
</html>
<style>
	body{
		background-image: url(img/loginbg3.png);
		background-size: cover;
	}
	.main{
		width: 1000px;
		/* border: 1px solid red; */
		padding: 50px;
		overflow: auto;
		/* background: #ff3bdd; */
		color: white;
		margin: 0 auto;
	}
	.box1{
		width: 40%;
		float: left;
		margin: 50px 23px;
		background: #2380ff;
		background: -o-linear-gradient(bottom right,red,#fffa86);
		background: linear-gradient(to bottom right,red #fffb46);
		outline: 8px #2aff1c dashed;
		overflow: hidden;
	}
	.box1:hover{
		transform: rotate(120deg) scale(1.5,1.5);
		transition-duration: 2s;
	}
	hr{
		border: 2px solid white;
	}
	img{
		
	}
</style>
<script>

</script>